<template>
	<view>
		<view v-for="item in List" :key="item.id">
		<view class="header">
			<view class="bg">
				<view class="box">
					<view class="box-hd">
						<view class="avator">
							<image class="img" :src="item.image" mode="aspectFit"></image>
						</view>
						<view class="phone-number">{{item.carname}}</view>
					</view>
					<view class="view1">
						<text class="text1">{{item.cardetial}}</text>
					</view>	
				</view>
			</view>
		</view>
		<view class="list-content">
			<view class="list">
				<view class="li noborder" >
					<view class="text">汽车牌号：{{item.carnumber}}</view>
				</view>
				<view class="li noborder" >
					<view class="text">车辆型号：{{item.cartype}}</view>
				</view>
				<view class="li noborder" >
					<view class="text">所在地点：{{item.caradd}}</view>
				</view>
				<view class="li noborder" >
					<view class="text">允许租赁路程：{{item.carlong}}</view>
				</view>
				<view class="li noborder" >
					<view class="text">租赁所需金额：{{item.carmoney}}</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="loginBtn">
				<text class="btnValue" @click="buy">开始租赁</text>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:'123',
				long:'123',
				id:'',
				List:[],
				date: new Date().toISOString().slice(0, 10)
			}
		},
		onLoad(e) {
			this.id = e.id;
		},
		onShow() {
			console.log(this.id);
			uni.request({
				url: 'http://116.62.213.195/car.php',
				data:{
					method: 'find',
					id:this.id
				},
				header: {'content-type' : "application/x-www-form-urlencoded"},
				method:'POST',
				success: res =>{
					if(res.data.code == '200'){
						this.List=JSON.parse(JSON.stringify(res.data.data));
						console.log(this.List);
				    }else{
				        console.log("加载失败"+res.data.data);
				    }
				}
			});
		},
		methods: {
			buy:function(){
				let mon = this.List[0].carmoney;
				let clong = this.List[0].carlong;
				let uid = uni.getStorageSync('username');
				console.log(uni.getStorageSync('nickname'));
				console.log(mon);
				console.log(uid);
				uni.request({
					url: 'http://116.62.213.195/car.php',
					data:{
						method: 'note',
						carid:this.id,
						carmoney:mon,
						caruserlong:clong,
						cardate:this.date,
						userid:uid
					},
					header: {'content-type' : "application/x-www-form-urlencoded"},
					method:'POST',
					success: res =>{
						if(res.data.code == '200'){
							console.log("购买成功"+res.data.data);
							console.log("购买成功"+res.data.data);
							uni.switchTab({
									url: '../main/main',
							})
					    }else{
							uni.showToast({title: "购买成功！", icon:"none"});
					        console.log("余额不足"+res.data.data);
							
					    }
					}
				});
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color:#f1f1f1;
	font-size: 30upx;
}
.header{
	background: #fff;
	height: 290upx;
	padding-bottom: 110upx;
	.bg{
		width: 100%;
		height:200upx;
		padding-top:100upx;
		background-color:#51eae5;
	}
}
.view1{
	margin: auto;
	width: 90%;
	border-radius: 7px;
	border:1px solid #7a7a7a;
}
.text1{
	width: 100%;
	height: 50px;
	text-align: center;
	
}
.box{
	width: 650upx;
	height: 280upx;
	border-radius: 20upx;
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2); 
	.box-hd{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		.avator{
			width: 160upx;
			height: 160upx;
			background: #fff;
			border: 5upx solid #fff;
			margin-top: -80upx;
			overflow: hidden;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.phone-number{
			width: 100%;
			text-align: center;
		}
	}
	.box-bd{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: center;
		.item{
			flex: 1 1 auto;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;
			border-right: 1px solid #f1f1f1;
			margin: 15upx 0;
			&:last-child{
				border: none;
			}
			.icon{
				width: 60upx;
				height: 60upx;
				.image1{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				width: 100%;
				text-align: center;
				margin-top: 10upx;
			}
		}
	}
}
.list-content{
	background: #fff;
}
.list{
	width:100%;
	border-bottom:15upx solid  #f1f1f1;
	background: #fff;
	&:last-child{
		border: none;
	}
	.li{
		width:92%;
		height:100upx;
		padding:0 4%;
		border-bottom:1px solid rgb(243,243,243);
		display:flex;
		align-items:center;
	&.noborder{
		border-bottom:0
		}
		.icon{
			flex-shrink:0;
			width:50upx;
			height:50upx;
			image{
				width:50upx;
				height:50upx;
			}
		}
		.text{
			padding-left:20upx;
			width:100%;
			color:#666;
		}
		.to{
			flex-shrink:0;
			width:40upx;
			height:40upx;
		}
	}
}
.form{
		padding: 0 100upx;
		margin-top: 40px;
	}
.loginBtn{
		width: 100%;
		height: 80upx;
		background: #38b390;
		border-radius: 50upx;
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.loginBtn .btnValue{
		color: white;
	}
</style>
